<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		canvas{
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="800" height="500">你的浏览器不支持canvas</canvas>
	<script type="text/javascript">
		//得到标签
		var canvas = document.getElementById("canvas");
		//上下文
		var ctx = canvas.getContext("2d");
		
		//小球类
		function Ball(x,y,r,color,speed){
			this.x = x;
			this.y = y;
			this.r = r;
			this.color = color;
			this.speed = speed;
		}
		//小球的原型
		Ball.prototype = {
			//更新自己
			update : function(){
				this.x += this.speed;
			},
			//渲染自己
			render : function(){
				//绘制圆的API：
				ctx.beginPath();
				ctx.arc(this.x , this.y , this.r , 0 , Math.PI * 2 , true);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
		}

		// 实例化一个小球
		var b1 = new Ball(100,100,50,"red",1);
		var b2 = new Ball(200,200,60,"blue",2);

		//定时器
		setInterval(function(){
			//清除画布
			ctx.clearRect(0, 0,canvas.width,canvas.height);
			//更新小球
			b1.update();
			//渲染小球
			b1.render();

			//更新小球
			b2.update();
			//渲染小球
			b2.render();
		}, 20);
	</script>
</body>
</html>